<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>客户管理列表</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/resources/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" method="post" id="searchForm">
			<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">客户名称:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="customername"  placeholder="请输入客户名称" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">客户电话:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="telephone"  placeholder="请输入客户电话" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">联系人:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="connectionperson"  placeholder="请输入联系人" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <button type="button" class="layui-btn" id="doSearch"><span class='layui-icon'>&#xe615;</span>搜索</button>
		          <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			    </div>
		   </div>
		</form>
	</blockquote>
	
	<table id="customerTable" class="layui-table" lay-filter="customerTable"></table>
	
	<!--表头-->
	<div id="customerTableToolBar" style="display: none;">
		<a class="layui-btn layui-btn-sm" lay-event="add"><span class="layui-icon">&#xe61f;</span>添加</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="batchdel"><span class="layui-icon">&#xe640;</span>批量删除</a>
	</div>
	<!--操作-->
	<div type="text/html" id="customerTableRowBar"  style="display: none;">
		<a class="layui-btn layui-btn-xs" lay-event="update"><span class="layui-icon">&#xe642;</span>编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
	</div>
	
	<!-- 修改和添加弹出层开始 -->
	<div style="display: none;padding: 3px" id="saveOrUpdateDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">客户名称:</label>
					<div class="layui-input-block">
						<input type="hidden" name="id">
						<input type="text" name="customername" lay-verify="required" autocomplete="off" placeholder="请输入客户名称" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">公司电话:</label>
					<div class="layui-input-block">
						<input type="text" name="telephone" lay-verify="required" autocomplete="off" placeholder="请输入公司电话" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">邮编:</label>
					<div class="layui-input-block">
						<input type="text" name="zip" lay-verify="required" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">公司地址:</label>
				<div class="layui-input-block">
					 <input type="text" name="address" autocomplete="off" placeholder="请输入公司地址" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">联系人:</label>
					<div class="layui-input-block">
						<input type="text" name="connectionperson" lay-verify="required" autocomplete="off" placeholder="请输入联系人" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">联系人电话:</label>
					<div class="layui-input-block">
						<input type="text" name="phone" lay-verify="required" autocomplete="off" placeholder="请输入联系人电话" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">邮箱:</label>
					<div class="layui-input-block">
						<input type="text" name="email" lay-verify="required" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">开户银行:</label>
					<div class="layui-input-block">
						<input type="text" name="bank" lay-verify="required" autocomplete="off" placeholder="请输入开户银行" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">账号:</label>
					<div class="layui-input-block">
						<input type="text" name="account" lay-verify="required" autocomplete="off" placeholder="请输入账号" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">传真:</label>
					<div class="layui-input-block">
						<input type="text" name="fax" lay-verify="required" autocomplete="off" placeholder="请输入传真" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否可用:</label>
					<div class="layui-input-inline">
						<input type="radio" name="available" value="1" title="可用" checked="">
						<input type="radio" name="available" value="0" title="不可用" >
					</div>
				</div>
			</div>	
			<div class="layui-form-item" style="text-align: center;">
				<button type="button" class="layui-btn" lay-filter="doSubmit" lay-submit=""><span class='layui-icon'>&#xe609;</span>提交</button>
				<button type="reset" class="layui-btn layui-btn-danger" ><span class='layui-icon'>&#xe669;</span>重置</button>
			</div>
		</form>
	</div>
	<!-- 修改和添加弹出层结束 -->
	
	
	<script type="text/javascript" src="/resources/layui/layui.js"></script>
	<script type="text/javascript">
	var tableIns;
	var $;
	layui.use(['layer','jquery','table','form'],function(){
		  var layer = layui.layer;
		  $ = layui.jquery;
		  var table = layui.table;
		  var form = layui.form;
		  
		  //数据加载
		  //渲染数据表格

		//渲染数据表格
			tableIns = table.render({
				elem:'#customerTable',
				url:'/customer/loadAllCustomer',
				toolbar:'#customerTableToolBar',//开启同工具栏
				defaultToolbar:['filter','print'],
				title: '权限数据表',
				height:'full-150',//固定高度
				cols:[ [
					{type: 'checkbox', fixed: 'left'},
					{field:'id',title:'客户ID',align:'center',fixed: 'left',width:'80'},
					{field:'customername',title:'客户名称',align:'center',width:'150'},
					{field:'zip',title:'客户邮编',align:'center',width:'150'},
					{field:'address',title:'客户地址',align:'center',width:'150'},
					{field:'telephone',title:'客户电话',align:'center',width:'150'},
					{field:'connectionperson',title:'联系人',align:'center',width:'150'},
					{field:'phone',title:'联系人电话',align:'center',width:'150'},
					{field:'bank',title:'开户行',align:'center',width:'150'},
					{field:'account',title:'账号',align:'center',width:'150'},
					{field:'email',title:'邮箱',align:'center',width:'150'},
					{field:'fax',title:'传真',align:'center',width:'150'},
					{field:'available',title:'是否可用',align:'center',width:'150',templet: function(d){
						 return d.available==1?'<font color=blue>可用</font>':'<font color=red>不可用</font>';
					}},
					{field:'right',title:'操作',toolbar:'#customerTableRowBar',align:'center',width:'250'}
				] ],
				page:true
			});
		    //模糊查询
		    $("#doSearch").click(function(){
		    	var params = $("#searchForm").serialize();
		    	tableIns.reload({
		    		url:'/customer/loadAllCustomer?'+params,
		    	})
		    });
		    
		    //监听表头点击事件
		    table.on('toolbar(customerTable)',function(obj){
		    	switch(obj.event){
		    		case 'add':
		    			 openAddLayer();
		    			break;
		    		case 'batchdel':
		    			batchDelete(obj);
		    			break;
		    	}
		    });
		    
		    var mainIndex;
		    var url;
		    //打开添加的弹出层
		    function openAddLayer(){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'添加客户',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						url="/customer/addCustomer";
						$("#dataForm")[0].reset();
					}

		    	});
		    }
		    
		    //批量删除
		    function batchDelete(obj){
		    	//获取要删除的行
		    	var checkStatus = table.checkStatus('customerTable');
		   		if(checkStatus.data.length==0){
		   			layer.msg("请选择要删除的数据");
		   		}else{
		   			layer.confirm('真的删除选中的所有角色么?',function(index){
		   				layer.close(index);
		   				var params="";
		   				$.each(checkStatus.data,function(i,item){
		   					if(i==0){
		   						params+="ids="+item.id;
		   					}else{
		   						params+="&ids="+item.id;
		   					}
		   				});
		   				//向服务器发送删除指令
		   				$.post("/customer/batchDeleteCustomer",params,function(obj){
		   					if(obj.code==200){
		   						tableIns.reload();//重载表格
		   					}
		   					layer.close(obj.msg);
		   				});
		   			});
		   		}
		    }
		    
		    //监听行点击事件
		    table.on('tool(customerTable)',function(obj){
		    	var data = obj.data;//获取当前行数据
		    	var layEvent = obj.event;//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    	if(layEvent === 'update'){//修改
		    		openUpdateLayer(data);
		    	}else if(layEvent === 'del'){//删除
		    		deleteDept(data);
		    	}
		    	
		    })
		    
		    //删除
		    function deleteDept(data){
    			layer.confirm('真的删除【'+data.customername+'】么',function(index){
	    			layer.close(index);
	    			//向服务器发送删除指令
	    			$.post("/customer/deleteCustomer",{id:data.id},function(obj){
	    				if(obj.code == 200){
	    					tableIns.reload();//重新加载表单
	    				}
	    				layer.msg(obj.msg);
	    			});
	    		});
		    }
		    
		    //打开修改的弹出层
		    function openUpdateLayer(data){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'修改客户',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						url="/customer/updateCustomer";
						$("#dataForm")[0].reset();
						form.val("dataForm",data);
					}
		    	});
		    }
		    
		    //监听提交按钮的事件  添加和修改完成后刷新左边的树
		    form.on("submit(doSubmit)",function(data){
		    	var params = $("#dataForm").serialize();
		    	//提交 数据
		    	$.post(url,params,function(obj){
		    		if(obj.code==200){
		    			tableIns.reload();//重新加载表单
		    		}
		    		layer.msg(obj.msg);
					layer.close(mainIndex);
		    	})
		    	return false;//阻止同步提交
		    });
		    
		   
		    
	  });
	
	
	</script>
	
	
	
	
</body>
</html>